<template> 
   <div class="container"> 
    <div class="left-side" style="width: 45%;"> 
      <img src="../assets/vbc.jpg"  alt="Logo" style="transform: scale(1.5);width: 100%; height: 434px; margin-top: 1px; margin-left: 282px;"> 
    </div> 
    <div class="right-side" style="width: 80%;"> 
      <div class="login-container"> 
        <img src="../assets/ycy.jpg"  alt="Logo" style="margin-top: 70px; margin-left: 165px; transform: scale(1.5);height: 100px; width: 100px;border-radius: 80%;"> 
        <h2 style="font-size: 35px; font-weight: normal;margin-left: -20px; ">欢迎登录</h2> 
        <form @submit.prevent="handleSubmit">  
          <div class="form-group"> 
            <label for="username"></label> 
            <input type="text" id="username" v-model="username" required placeholder="请输入用户名"> 
          </div> 
          <div class="form-group1"> 
            <label for="password"></label> 
            <input type="password" id="password" v-model="password" required placeholder="请输入密码"> 
          </div> 
          <div class="form-group2"> 
            <input type="checkbox" id="privacy-agreement" v-model="agreeToPrivacyPolicy" required style="display: inline-block;"> 
            <label for="privacy-agreement" style="display: inline-block;">我已阅读同意《用户隐私协议》</label> 
          </div> 
          <button type="submit" style="width: 430px; margin-left: 10px;">登录</button> 
          <p style="text-align: center;">忘记密码需联系管理员</p> 
        </form> 
      </div> 
    </div> 
  </div> 
</template> 




<script setup> 
import { ref,onMounted } from 'vue' 
import { useRouter } from 'vue-router' 
import axios from 'axios' 

const router = useRouter() 

// 使用ref定义响应式数据 
const username = ref('') 
const password = ref('') 
const data = ref([])
const agreeToPrivacyPolicy = ref(false) 

// 定义提交处理函数 
const handleSubmit = async () => { 
  if (!agreeToPrivacyPolicy.value)  { 
    return; 
  } 
  console.log('Submitted:',  username.value,  password.value);  
  try { 
    const res = await axios.post("http://127.0.0.1:8000/user/login/",  { 
      username: username.value,  
      password: password.value  
    });


    console.log(res);  
    if (res.status  === 200) { 
      alert("登录成功");
      let data = res.data.menulist
      localStorage.setItem('menulist',JSON.stringify(res.data.data))
      localStorage.setItem('token',res.data.token)
      localStorage.setItem('avatar',res.data.avatar)
      router.push('/backend');
      


    } else if (res.status  === 400) { 
      alert("账户未激活"); 
    } 
  } catch (err) { 
    console.error("Error  during request:", err); 
    alert("账号或密码错误"); 
  } 
}; 
onMounted(() => {

})



const menulist = JSON.parse(localStorage.getItem('menulist'));
function extractUrls(data) {
    let urls = [];
    function traverse(obj) {
        if (obj && typeof obj === 'object') {
            for (let key in obj) {
                if (key === 'url' && obj[key]) {
                    urls.push(obj[key]); 
                } else if (typeof obj[key] === 'object') {
                    traverse(obj[key]);
                }
            }
        }
    }
    traverse(data);
    return urls;
}
 
const urls = extractUrls(menulist);
console.log(urls);
</script> 

 
<style scoped> 
.container { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  width: 100%; 
} 
 
.left-side { 
  width: 300px;
  height: 400px; 
  text-align: center; 
  margin-left:-200px;
  margin-top: 30px;
} 

.right-side { 
  width: 50%; 
} 
 
.login-container { 
  margin-top: 70px; 
  margin-left: 165px; 
} 



.login-container { 
  width: 90%; 
  max-width: 520px; 
  margin-left: 380px;
  padding: 30px; 
  height: auto; 
  border: 0px solid #d5d5d5; 
  border-radius: 10px; 
  box-shadow: 0 0 20px rgba(139, 139, 139, 0.1); 
  background: linear-gradient(135deg, #ffffff, #ffffff); /* 渐变背景 */ 
} 

h2 { 
  text-align: center; 
  margin-bottom: 30px; 
  margin-top: 10px;
  font-size: 28px; 
  color: #333; 
  font-family: 'Roboto', sans-serif; /* 自定义字体 */ 
} 

.form-group, .form-group1, .form-group2 { 
  margin: 0 auto 25px; 
  width: 90%; 
  max-width: 390px; 
  margin-top: 40px; 
} 

label { 
  display: block; 
  margin-bottom: 10px; 
  font-size: 18px; 
  color: #555; 
  font-family: 'Roboto', sans-serif; /* 自定义字体 */ 
} 
/* 增加背景渐变效果 */
body {
  background: linear-gradient(to right, #6dd5ed, #2193b0);
}
 
/* 优化按钮样式 */
button {
  background-color: #0056b3; /* 更深的蓝色 */
  transition: all 0.3s ease;
}
 
button:hover {
  background-color: #003d82; /* 鼠标悬停时更深的蓝色 */
}
 
/* 输入框聚焦效果 */
input[type="text"]:focus,
input[type="password"]:focus {
  border-color: #0056b3;
  box-shadow: 0 0 8px rgba(0, 86, 179, 0.5);
}
 
/* 登录框阴影效果 */
.login-container {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
 
/* 文字颜色调整 */
h2 {
  color: #0056b3; /* 更深的蓝色 */
}
 
/* 输入框和按钮圆角调整 */
input[type="text"],
input[type="password"],
button {
  border-radius: 8px; /* 更大的圆角 */
}
 
/* 媒体查询优化 */
@media (max-width: 768px) {
  .login-container {
    margin-left: auto;
    margin-right: auto;
  }
}
input[type="text"], 
input[type="password"] { 
  width: 100%; 
  padding: 12px; 
  font-size: 16px; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* 内阴影 */ 
} 

button { 
  width: 100%; 
  padding: 12px; 
  background-color: #618b9773; 
  color: white; 
  font-size: 18px; 
  border: none; 
  border-radius: 5px; 
  cursor: pointer; 
  transition: background-color 0.3s ease; /* 悬停动画 */ 
} 

button:hover { 
  background-color: #618b9773; 
} 

@media (max-width: 768px) { 
  .login-container { 
      width: 95%; 
      padding: 20px; 
  } 

  h2 { 
      font-size: 24px; 
  } 

  .form-group, .form-group1, .form-group2 { 
      margin-top: 20px; 
  } 

  input[type="text"], 
  input[type="password"] { 
      padding: 10px; 
      font-size: 14px; 
  } 

  button { 
      padding: 10px; 
      font-size: 16px; 
  } 
} 
</style> 
